<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
		  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 中间内容区域 -->
		<!-- 卡片  当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名-->
		<el-card>
		    <el-table :data="tableData" style="width: 100%" stripe border>
		          <el-table-column type="index"></el-table-column>
		          <el-table-column label="权限名称" prop="authName"></el-table-column>
		          <el-table-column label="路径" prop="path"></el-table-column>
		          <el-table-column label="权限等级" prop="level">
					  <!-- 这里等级要用标签来显示，不能直接用porp来获取数字  需要用到作用域插槽，就需要tempalte模板-->
					  <template slot-scope="scope">
						  <!-- scope.row获取整条信息 -->
						  <!-- {{scope.row}} -->
						  <!-- 标签 -->
						  <el-tag v-if="scope.row.level == '0'">一级</el-tag>
						  <el-tag type="success" v-else-if="scope.row.level == '1'">二级</el-tag>
						  <el-tag type="warning" v-else>三级</el-tag>
					  </template>
				  </el-table-column>
		        </el-table>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				// 权限列表
				tableData:[]
			}
		},
		// created 生命周期，打开页面立即加载数据
		created() {
			// 获取所有的权限
			this.getRightsList()
		},
		methods:{
			//  获取所有的权限
			async getRightsList(){
				const {data:res} = await this.$http.get('rights/list')
				console.log(res)
				if (res.meta.status != 200)return this.$message.error(res.meta.msg)
				this.tableData = res.data
			}
		}
	}
</script>

<style>
</style>
